<template>
  <div class="data-report">
    <div style="margin-bottom: 15px;">
      <span>项目：</span>
      <el-select size="mini" style="width: 150px;" v-model="projectId" @change="onAppChange">
        <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"></el-option>
      </el-select>
    </div>
      <div class="stats tag-stats">
        <div class="head">
          <h6 class="title">反馈标签详情</h6>
          <div class="filters">
            <div
              class="filter-item"
              style="flex: 300px 0 0"
            >
              <span class="filter-item_label">时间：</span>
              <span class="filter-item_opts">
                <date-range
                  v-model="queryParam1.time_range"
                  @change="detailStats"
                />
              </span>
            </div>
            <div class="chart-tab">
              <div
                class="chart-tab_item"
                v-for="item in chartTabs"
                :class="{ active: avtiveChart === item.id }"
                :key="item.id"
                @click="chartTabClick(item)"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
        <div class="more-filters">
          <div class="filters">
            <div class="filter-item">
              <span class="filter-item_label">来源：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam1.come_from"
                  :selOptions="comeFrom"
                  checkAllLabel="全部来源"
                  @change="detailStats"
                />
              </span>
            </div>
            <div class="filter-item">
              <span class="filter-item_label">版本：</span>
              <span class="filter-item_opts">
                <version-select :selOptions="versionOpts" v-model="queryParam1.version" @change="detailStats"></version-select>
              </span>
            </div>
            <div class="filter-item">
              <span class="filter-item_label">小组：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam1.handle_group"
                  :selOptions="groupOpts"
                  :props="{
                    label:'group_name',
                    value:'group_id'
                  }"
                  checkAllLabel="全部处理小组"
                  @change="detailStats"
                />
              </span>
            </div>
            <div class="filter-item">
              <span class="filter-item_label">状态：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam1.status"
                  :selOptions="statusOpts"
                  :props="{
                    label:'status_name',
                    value:'status_id'
                  }"
                  checkAllLabel="全部状态"
                  @change="detailStats"
                />
              </span>
            </div>
            <div class="filter-item">
              <span class="filter-item_label">模块：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam1.module"
                  :selOptions="moduleOpts"
                  :props="{
                    label:'mod_name',
                    value:'mod_id'
                  }"
                  checkAllLabel="全部模块"
                  @change="detailStats"
                />
              </span>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="chart-box">
            <div class="tag-rank">
              <div class="sub-title">标签排行榜</div>
              <div class="table-box">
                <el-table
                  :data="tagRankList"
                  height="500px"
                >
                  <el-table-column label="排序">
                    <template #default="{ $index }">
                      {{ $index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="标签名"
                    prop="name"
                    width="160px"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    label="数量"
                    prop="value"
                  > </el-table-column>
                  <el-table-column
                    label="占反馈标签总量的比率"
                    prop="percent"
                    width="160px"
                  >
                    <template #default="{ row }">
                      <div class="percent-box">
                        <div class="percent">{{ row.percent }}%</div>
                        <div class="progress">
                          <div
                            class="step"
                            :style="{ width: row.percent + '%' }"
                          ></div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="chart-wrap">
              <div class="time_grain">
                <el-radio-group v-model="time_grain_sqla" size="mini" v-if="avtiveChart === 2" @change="renderLineChart()">
                  <el-radio-button label="P1D">日</el-radio-button>
                  <el-radio-button label="P1W">周</el-radio-button>
                  <el-radio-button label="P1M">月</el-radio-button>
                </el-radio-group>
              </div>
              <div
                class="pie-box"
                v-show="avtiveChart === 1"
              >
                <div class="total">反馈标签总量：{{ tagTotal }}</div>
                <e-charts
                  class="pie-wrap"
                  :options="pieOption1"
                  autoresize
                />
              </div>
              <div
                class="line-box"
                v-show="avtiveChart === 2"
              >
                <e-charts
                  class="line-wrap"
                  :options="lineOption1"
                  autoresize
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="stats amount-stats">
        <div class="head">
          <h6 class="title">反馈量统计</h6>
          <div class="filters">
            <div class="filter-item">
              <span class="filter-item_label">版本：</span>
              <span class="filter-item_opts">
                <version-select :selOptions="versionOpts" v-model="queryParam2.version" @change="amountStats"></version-select>
              </span>
            </div>
            <div class="filter-item">
              <span class="filter-item_label">小组：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam2.handle_group"
                  :selOptions="groupOpts"
                  :props="{
                    label:'group_name',
                    value:'group_id'
                  }"
                  checkAllLabel="全部处理小组"
                  @change="amountStats"
                />
              </span>
            </div>
            <div class="filter-item">
              <span class="filter-item_label">模块：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam2.module"
                  :selOptions="moduleOpts"
                  :props="{
                    label:'mod_name',
                    value:'mod_id'
                  }"
                  checkAllLabel="全部模块"
                  @change="amountStats"
                />
              </span>
            </div>
            <div
              class="filter-item"
              style="flex: 300px 0 0"
            >
              <span class="filter-item_label">时间：</span>
              <span class="filter-item_opts">
                <date-range
                  v-model="queryParam2.time_range"
                  @change="amountStats"
                />
              </span>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="amounts">
            <div class="amount sum">
              <div class="label">反馈统计总量</div>
              <div class="count">{{ amount.sum }}</div>
            </div>
            <div class="amount unProcess">
              <div class="label">待处理反馈量</div>
              <div class="count">{{ amount.unProcess }}</div>
            </div>
            <div class="amount processing">
              <div class="label">处理中反馈量</div>
              <div class="count">{{ amount.processing }}</div>
            </div>
            <div class="amount processed">
              <div class="label">已处理反馈量</div>
              <div class="count">{{ amount.processed }}</div>
            </div>
          </div>
          <e-charts
            class="amount-chart"
            :options="lineOption2"
            autoresize
          />
        </div>
      </div>
      <div class="stats distri-stats">
        <div class="head">
          <h6 class="title">反馈分布情况</h6>
        </div>
        <div class="tab-box">
          <div class="tabs">
            <div
              class="tab_item"
              v-for="item in tabList"
              :key="item.id"
              :class="{ active: actTabItem.id === item.id }"
              @click="distriTabClick(item)"
            >
              {{ item.label }}
            </div>
          </div>
          <div class="filters">
            <div class="filter-item">
              <span class="filter-item_label">时间：</span>
              <span class="filter-item_opts">
                <date-range
                  v-model="queryParam3.time_range"
                  @change="distriStats"
                />
              </span>
            </div>
          </div>
        </div>
        <div class="more-filters">
          <div class="filters">
            <div
              class="filter-item"
              v-show="actTabItem.filter.includes('version')"
            >
              <span class="filter-item_label">版本：</span>
              <span class="filter-item_opts">
                <version-select :selOptions="versionOpts" v-model="queryParam3.version" @change="distriStats"></version-select>
              </span>
            </div>
            <div
              class="filter-item"
              v-show="actTabItem.filter.includes('come_from')"
            >
              <span class="filter-item_label">来源：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam3.come_from"
                  :selOptions="comeFrom"
                  checkAllLabel="全部来源"
                  @change="distriStats"
                />
              </span>
            </div>

            <div
              class="filter-item"
              v-show="actTabItem.filter.includes('status')"
            >
              <span class="filter-item_label">状态：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam3.status"
                  :selOptions="statusOpts"
                  :props="{
                    label:'status_name',
                    value:'status_id'
                  }"
                  checkAllLabel="全部状态"
                  @change="distriStats"
                />
              </span>
            </div>
            <div
              class="filter-item"
              v-show="actTabItem.filter.includes('handle_group')"
            >
              <span class="filter-item_label">小组：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam3.handle_group"
                  :selOptions="groupOpts"
                  :props="{
                    label:'group_name',
                    value:'group_id'
                  }"
                  checkAllLabel="全部处理小组"
                  @change="distriStats"
                />
              </span>
            </div>
            <div
              class="filter-item"
              v-show="actTabItem.filter.includes('module')"
            >
              <span class="filter-item_label">模块：</span>
              <span class="filter-item_opts">
                <select-check-box
                  filterable
                  v-model="queryParam3.module"
                  :selOptions="moduleOpts"
                  valKey="mod_id"
                  labKey="mod_name"
                  checkAllLabel="全部模块"
                  @change="distriStats"
                />
              </span>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="chart-box">
            <div class="total">
              反馈总量：{{ distriTotal }} 条
            </div>
            <e-charts
              class="distri-chart"
              :options="pieOption2"
              autoresize
            />
          </div>
          <div class="distri-data">
            <div class="list">
              <el-table
                :data="distriChartList"
                height="460px"
              >
                <el-table-column>
                  <template #default="{ row, $index }">
                    <span
                      class="mark"
                      :style="{
                        background: distriColor[$index % distriColor.length]
                      }"
                    ></span>
                    <span class="label">{{ row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row }">
                    <span class="percent">{{ row.percent }}%</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template #default="{ row }">
                    <span class="count">{{ row.value }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import DateRange from './components/dateRange.vue'
import ECharts from '@/components/Echarts/index'
import axios from 'axios'
import { getReportData } from '@/api/feedback/report'
import { parseTime, toFixed, numToText } from '@/utils/index'
import * as resource from '../resource'
import { COME_FROM } from '../constant'
import * as echarts from 'echarts/core'
import { LineChart, PieChart } from 'echarts/charts'
import { getVersionTree } from '@/api'
echarts.use([LineChart, PieChart])
const dateFmt = '{y}-{m}-{d}'
const fbKey = '反馈'
const datasource = 8
export default {
  name: 'DataReport',
  components: { DateRange, ECharts },
  props: {},
  data () {
    const d = new Date()
    const end = parseTime(d, dateFmt)
    const start = parseTime(d.setDate(d.getDate() - 29), dateFmt)
    return {
      projectId: null,
      time_grain_sqla: 'P1D',
      queryParam1: {
        version: [],
        status: [],
        module: [],
        handle_group: [],
        time_range: [start, end],
        come_from: '',
        indicator: 1,
        group_by: 'label',
        order_by: '1 desc',
        granularity: 'created_at',
        datasource
      },
      chartTabs: [
        {
          id: 1,
          label: '分布图'
        },
        {
          id: 2,
          label: '趋势图'
        }
      ],
      avtiveChart: 1,
      tagRankList: [],
      tagTotal: 0,
      queryParam2: {
        version: [],
        handle_group: [],
        module: [],
        time_range: [start, end],
        indicator: 2,
        group_by: 'status',
        time_grain_sqla: 'P1D',
        granularity: 'created_at',
        datasource
      },
      amount: {
        sum: 0,
        unProcess: 0,
        processing: 0,
        processed: 0
      },
      tabList: [
        {
          id: 'version',
          label: '版本分布',
          custom: true,
          filter: ['come_from', 'module', 'status']
        },
        {
          id: 'come_from',
          label: '来源分布',
          filter: ['version', 'module', 'status']
        },
        {
          id: 'module',
          label: '模块分布',
          filter: ['come_from', 'version', 'status']
        },
        {
          id: 'label',
          label: '标签分布',
          custom: true,
          filter: ['module', 'version', 'status']
        },
        {
          id: 'handle_group',
          label: '处理小组分布',
          filter: ['module', 'status']
        },
        {
          id: 'result',
          label: '处理结果分布',
          custom: true,
          filter: ['module', 'handle_group']
        }
      ],
      actTabItem: {
        filter: []
      },
      queryParam3: {
        status: [],
        version: [],
        handle_group: [],
        module: [],
        come_from: [],
        time_range: [start, end],
        indicator: 2,
        order_by: '2 desc',
        group_by: 'status',
        granularity: 'created_at',
        datasource
      },
      distriList: [],
      distriChartList: [],
      distriTotal: 0,
      distriColor: [
        '#60acfc',
        '#9fcdfdd9',
        '#32d3eb',
        '#84e4f3db',
        '#9d94ea',
        '#d4cffd',
        '#40cec7',
        '#8ce1ddde',
        '#8087e6',
        '#c4c8fb',
        '#39b3ea',
        '#7dc6f2d6',
        '#5bc49f',
        '#9cdbc5d6',
        '#7885f1',
        '#b8bffb',
        '#76a1ef',
        '#c5d8fb',
        '#27a1ea',
        '#7dc6f2d1',
        '#35c5ea',
        '#85dcf2d9',
        '#f788aa',
        '#f7adc4e0',
        '#fb9a8a',
        '#fca8a6c9',
        '#d870af',
        '#dc91bfd1',
        '#4ebecd',
        '#94d8e1c9'
      ],
      statusOpts: [],
      moduleOpts: [],
      groupOpts: [],
      versionOpts: [],
      tagList: [],
      resList: [],
      comeFrom: COME_FROM.map(t => ({ value: t.label, label: t.label })),
      limitList: [],
      limitFilter: [],
      pieOption1: {},
      pieOption2: {},
      lineOption1: null,
      lineOption2: {}
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  created () {
    if (this.permission_projectList.length) {
      this.projectId = this.permission_projectList[0].app_id
    }
    this.init()
  },
  methods: {
    onAppChange () {
      this.init()
    },
    async init () {
      await axios
        .all([getVersionTree({ app_id: this.projectId, is_test: false }), resource.getModuleList({ pro_id: this.projectId }), resource.getGroupList({ pro_id: this.projectId }), resource.getTagList({ pro_id: this.projectId }, false), resource.getResList({ pro_id: this.projectId }, false), resource.getStatusList(this.projectId)])
        .then(
          axios.spread((res1, res2, res3, res4, res5, res6) => {
            this.versionOpts = res1.data || []
            res2.unshift({
              mod_name: '未分配模块',
              mod_id: 0
            })
            this.moduleOpts = res2
            res3.unshift({
              group_id: 0,
              group_name: '未设置处理小组'
            })
            this.groupOpts = res3

            res4.unshift({
              label_id: 0,
              label_name: '未设置标签'
            })
            this.tagList = res4
            res5.unshift({
              result_id: 0,
              result_name: '无结果标签'
            })
            this.resList = res5
            this.statusOpts = res6
          })
        ).catch(() => { })
      this.detailStats()
      this.amountStats()
      this.distriTabClick(this.tabList[0])
    },
    chartTabClick ({ id }) {
      this.avtiveChart = id
      this.detailStats()
    },
    // 标签详情统计
    async detailStats () {
      await this.getTagRankList()
      if (this.avtiveChart === 1) {
        this.renderPieChart()
      } else {
        this.renderLineChart()
      }
    },
    // 标签排行榜
    getTagRankList () {
      this.queryParam1.appid = this.projectId
      return this.getChartData(this.queryParam1).then(res => {
        const list =
          ((Array.isArray(res.data[0].result) && res.data[0].result[0].data) ||
            []).filter(t => t.label)
        const fbKey = '标签数量'
        const total = (this.tagTotal = list.reduce((sum, t) => {
          sum += t[fbKey] || 0
          return sum
        }, 0))
        this.tagRankList = list.slice(0, 10).map(t => {
          const value = t[fbKey] || 0
          return {
            ...t,
            name: t.label,
            value,
            percent: total ? toFixed((value * 100) / total, 1) : 0
          }
        })
        /* const other = list.slice(9)
        if (other.length) {
          const value = other.reduce((sum, t) => {
            sum += t['标签数量'] || 0
            return sum
          }, 0)
          this.tagRankList.push({
            name: '其余内容标签',
            value,
            percent: total ? toFixed((value * 100) / total, 1) : 0
          })
        } */
      })
    },
    renderPieChart () {
      this.pieOption1 = {
        tooltip: {
          trigger: 'item',
          formatter: this.formatterHandle
        },
        legend: {
          bottom: 10
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '45%'],
            labelLine: {
              show: true
            },
            data: this.tagRankList
          }
        ]
      }
    },
    renderLineChart () {
      this.getChartData({
        ...this.queryParam1,
        granularity: 'created_at',
        time_grain_sqla: this.time_grain_sqla
      }).then(res => {
        const list =
          (Array.isArray(res.data[0].result) && res.data[0].result[0].data) ||
          []
        this.lineOption1 = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: 'scroll',
            left: 20,
            right: 20,
            bottom: 10
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: list.map(t => this.fmtTableDate(t.__timestamp, this.time_grain_sqla))
          },
          yAxis: {
            type: 'value'
          },
          series: list.reduce((arr, item) => {
            for (const key in item) {
              if (key === '__timestamp') continue
              const it = arr.find(t => t.name === key)
              const val = item[key] || 0
              if (it) {
                it.data.push(val)
              } else {
                const obj = {
                  name: key,
                  type: 'line',
                  data: [val]
                }
                arr.push(obj)
              }
            }
            return arr
          }, [])
        }
      })
    },
    // 格式化表格日期
    fmtTableDate (date, type) {
      const d = new Date(date)
      let dateStr = parseTime(d, dateFmt)
      switch (type) {
        case '[P1D]': // 天
          dateStr += `（${'日一二三四五六'.charAt(d.getDay())}）`
          break
        case 'PIW': // 周
          dateStr += '（周）'
          break
        case 'P1M': // 月
          dateStr = dateStr.slice(0, 7) + '（月）'
          break
      }
      return dateStr
    },
    // 反馈量统计
    amountStats () {
      this.queryParam2.appid = this.projectId
      this.getChartData(this.queryParam2).then(res => {
        const list =
          (Array.isArray(res.data[0].result) && res.data[0].result[0].data) ||
          []
        const listMap = this.translateToMap(list)
        const xData = []
        const yData = this.statusOpts.map(t => ({
          name: t.status_name,
          value: t.status_id,
          type: 'line',
          // stack: 'Total',
          data: []
        }))
        const totalData = []
        this.amount = {
          sum: 0,
          unProcess: 0,
          processing: 0,
          processed: 0
        }
        const { time_range } = this.queryParam2
        const st = new Date(time_range[0])
        st.setHours(8, 0, 0, 0)
        const et = new Date(time_range[1]).setHours(8, 0, 0, 0)
        while (Date.parse(st) <= et) {
          const obj = listMap[Date.parse(st)]
          xData.push(
            `${parseTime(st, dateFmt)}（${'日一二三四五六'.charAt(st.getDay())}）`
          )
          let sum = 0
          if (obj) {
            yData.forEach(it => {
              const value = obj[it.value] || 0
              sum += value
              it.data.push(value)
              if (it.value === 1) {
                this.amount.unProcess += value
              } else if (it.value === 2) {
                this.amount.processing += value
              } else if (it.value === 3) {
                this.amount.processed += value
              }
            })
          } else {
            yData.forEach(it => it.data.push(0))
          }
          totalData.push(sum)
          st.setDate(st.getDate() + 1)
        }
        this.amount.sum = numToText(
          this.amount.unProcess + this.amount.processing + this.amount.processed
        )
        yData.unshift({
          name: '反馈统计量',
          type: 'line',
          // stack: 'Total',
          data: totalData
        })
        this.lineOption2 = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            bottom: 10
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: yData
        }
      })
    },
    distriTabClick (item) {
      if (item.id === this.actTabItem.id) return
      this.actTabItem = item
      this.queryParam3.group_by = item.id
      this.customVerList = []
      this.customTagList = []
      this.customResList = []
      this.distriStats()
    },
    // 反馈分布统计
    distriStats () {
      const params = {
        ...this.queryParam3
      }
      params.appid = this.projectId
      this.getChartData(params).then(res => {
        this.distriList =
          (Array.isArray(res.data[0].result) && res.data[0].result[0].data) ||
          []
        this.renderDistriPie()
      })
    },
    renderDistriPie () {
      const { group_by } = this.queryParam3
      let list = this.distriList
      const total = (this.distriTotal = list.reduce((sum, t) => {
        sum += t[fbKey] || 0
        return sum
      }, 0))
      const data = (this.distriChartList = list.map(t => {
        const value = t[fbKey] || 0
        return {
          id: t[group_by],
          ...t,
          name: t[group_by],
          value,
          percent: total ? toFixed((value * 100) / total, 1) : 0
        }
      }))
      this.pieOption2 = {
        tooltip: {
          trigger: 'item',
          formatter: this.formatterHandle
        },
        legend: {
          type: 'scroll',
          left: 20,
          right: 30,
          bottom: 10
        },
        color: this.distriColor,
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '45%'],
            labelLine: {
              show: true
            },
            data
          }
        ]
      }
    },
    getParameter (params = {}) {
      const query = {}
      for (const key in params) {
        let val = params[key]
        let flag = false
        if (key === 'time_range') {
          val = `${val[0] + 'T00:00:00'} : ${val[1] + 'T23:59:59'}`
        } else if (Array.isArray(val)) {
          // 选项中存在只有一个空串的情况，需要传递到后端
          flag = val.length === 1 && val[0] === ''
          val = val.join(',')
        }
        if (
          [
            'status',
            'module',
            'version',
            'handle_group',
            'appid',
            'come_from'
          ].includes(key) && (val || flag)
        ) {
          let filters = query.filters || ''
          if (filters) filters += ' and '
          filters += `${key} in (${val})`
          query.filters = filters
        } else if (val !== '') {
          query[key] = val
        }
      }
      return query
    },
    getChartData (params = {}) {
      return getReportData(this.getParameter(params))
    },
    formatterHandle (params) {
      const {
        data: { name, value, percent },
        color
      } = params
      return `                  
              <span class="tag-tooltip"><span class="prefix" style="background: ${color}"></span>${name}：${value}条&nbsp;|&nbsp;<span class="percent">${percent}%</span></span>
              `
    },
    translateToMap (arr) {
      return arr.reduce((obj, t) => {
        const o = obj[t.__timestamp] = {}
        for (const k in t) {
          if (k !== '__timestamp') {
            o[k] = t[k] || 0
          }
        }
        return obj
      }, {})
    }
  }
}
</script>

<style lang="scss" scoped>
.data-report {
  .title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
  }
  .stats {
    margin-bottom: 30px;
    border: 1px solid #ddd;
  }
  .head {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    align-items: center;
    border-bottom: 1px solid #ddd;
  }
  .content {
    padding: 20px;
  }
  .filters {
    display: flex;
    .filter-item {
      flex: 236px 0 0;
      display: flex;
      align-items: center;
      margin-left: 16px;
      &_label {
        flex: 50px 0 0;
        text-align: right;
      }
    }
  }

  .tag-stats {
    .chart-tab {
      flex: 140px 0 0;
      display: flex;
      height: 36px;
      margin-left: 16px;
      line-height: 36px;
      border-radius: 4px;
      border: 1px solid #ddd;

      .chart-tab_item {
        text-align: center;
        flex: 1;
        cursor: pointer;
        border-right: 1px solid #ddd;

        &:last-of-type {
          border-right: none;
        }

        &:hover {
          background-color: #eee;
        }

        &.active {
          color: #fff;
          background-color: #409eff;
        }
      }
    }
    .more-filters {
      padding: 0 10px;
    }
    .chart-box {
      display: flex;
      overflow: hidden;

      .tag-rank {
        border: 1px solid #ddd;
        flex: 400px 0 0;
        border-radius: 6px;

        .sub-title {
          height: 40px;
          padding-left: 16px;
          line-height: 40px;
          font-size: 14px;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
        }

        .table-box {
          padding: 10px;
        }
      }

      .chart-wrap {
        flex: 1;
        position: relative;
      }
      .time_grain{
        position: absolute;
        right: 0;
        z-index: 1;
      }
      .pie-box {
        padding: 0 100px;

        .pie-wrap {
          height: 530px;

          /deep/ {
            .tag-tooltip {
              display: flex;
              align-items: center;

              .prefix {
                flex: 6px 0 0;
                width: 6px;
                height: 6px;
                margin-right: 4px;
              }

              .percent {
                color: #409eff;
              }
            }
          }
        }
      }

      .line-box {
        height: 100%;

        .line-wrap {
          height: 100%;
        }
      }
    }

    .percent-box {
      display: flex;
      width: 140px;
      align-items: center;

      .percent {
        flex: 50px 0 0;
      }

      .progress {
        flex: 1;
        height: 12px;

        .step {
          height: 100%;
          background-color: #409eff;
        }
      }
    }
  }

  .amount-stats {
    .content {
      padding: 0;
    }
    .amounts {
      display: flex;
      height: 100px;
      align-items: center;
      border-bottom: 1px solid #ddd;
      .amount {
        flex: 1;
        padding-left: 30px;
        .label {
          color: #999;
        }
        .count {
          color: #666;
          font-size: 30px;
        }
      }
    }
    .amount-chart {
      height: 530px;
    }
  }

  .distri-stats {
    .tab-box {
      display: flex;
      padding: 0 10px;
      margin-bottom: 10px;
      align-items: center;
      border-bottom: 1px solid #ddd;
      .tabs {
        display: flex;
        .tab_item {
          cursor: pointer;
          color: #666;
          height: 50px;
          line-height: 50px;
          padding: 0 10px;
          &:hover {
            color: #409eff;
          }
          &.active {
            color: #409eff;
            border-bottom: 2px solid #409eff;
          }
        }
      }
      .filters {
        flex: 1;
        .filter-item {
          flex: 300px 0 0;
        }
      }
    }
    .content {
      display: flex;
      height: 530px;
    }
    .chart-box {
      flex: 3;
      display: flex;
      overflow: hidden;
      flex-direction: column;
      .distri-chart {
        flex: 1;
      }
    }
    .more-filters {
      display: flex;
      padding: 0 10px;
      .filters {
        flex: 1;
      }
    }
    .distri-data {
      flex: 2;
      overflow: hidden;
      .mark {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
      }
      .percent {
        opacity: 0.7;
        font-size: 12px;
      }
      .count {
        font-size: 12px;
      }
    }
  }
  .el-select {
    /deep/ .el-select__tags {
      .el-select__tags-text {
        display: inline-block;
        max-width: 50px;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-tag__close {
        top: -6px;
      }
    }
  }
  .total {
    display: flex;
    color: #409eff;
    font-size: 16px;
    align-items: center;
    justify-content: center;

    &::before {
      width: 6px;
      height: 20px;
      content: '';
      margin-right: 6px;
      background-color: #409eff;
    }
  }
}
</style>
